<template>
  <!-- 按钮切换部分 -->
  <div class="opera">
    <div>
      <!-- 面包屑 -->
      <!--      <el-breadcrumb class="opera_breadcrumb">-->
      <!--        <el-breadcrumb-item-->
      <!--          :to="item.url"-->
      <!--          v-for="item in breadcrumbList"-->
      <!--          :key="item.url">-->
      <!--          {{item.name}}-->
      <!--        </el-breadcrumb-item>-->
      <!--      </el-breadcrumb>-->
    </div>

    <!-- 按钮列表 -->
    <div class="opera_btn" v-if="!hideOpera">
      <el-form ref="form" label-width="80px" :inline="true">
        <el-form-item label="监测点位">
          <el-button
            :style="item.id ===activeId?'background-color: #1990FE;':''"
            type="primary"
            size="small"
            :plain="item.id !== activeId"
            v-for="item in monitorList"
            @click="$emit('update', item.id)"
            :key="item.id">
            {{item.monitorName}}
          </el-button>

        </el-form-item>
      </el-form>

    </div>

  </div>
</template>

<script>
  import {store} from '../../work-point.store'

  export default {
    props: ['monitorList', 'activeId', 'hideOpera'],
    filters: {},
    methods: {
      // 时间格式化
      minitorType(item, activeId) {
        if (item.id === activeId) {
          return 'primary'
        } else {
          return ''
        }
      },
    },
    computed: {
      // 面包屑路径
      breadcrumbList() {
        const {workPointId, type} = this.$route.params
        const projectInfo = store.workPointList.find(x => x.id === workPointId) || {}
        // 项目节点
        const projectItem = {name: projectInfo.projectName, url: `/project/${projectInfo.projectId}/home`}
        // 工点节点
        const workPoint = store.workPoint_MonitorList.find(x => x.id === workPointId) || {}
        const workPointItem = {name: workPoint.name, url: `/project/${projectInfo.projectId}/work-point`}
        // 监测点数据
        const monitorPoint = workPoint.children?.find(x => x.monitorType === Number(type)) || {}
        const monitorItem = {
          name: monitorPoint.name,
          url: `/project/${projectInfo.projectId}/work-point/${workPoint.id}/monitor/${monitorPoint.monitorType}`
        }
        return [projectItem, workPointItem, monitorItem]
      },
      // true  监测单位显示
      isAuthority() {

        return this.$store.state.userInfo.unitType === 4
      },
      // 久感科技相关账户展示
      jiuGanKeJi() {
        return this.$store.state.userInfo.organizationName === '北京久感科技有限公司' || this.$store.state.userInfo.organizationName === '久感监测'
      }
    },
  }
</script>

<style lang="less" scoped>
  .opera {
    /*display: flex;*/
    padding-left: 10px;


    .opera_breadcrumb {
      flex-shrink: 0;
      line-height: 32px;
    }

    .opera_btn {
      padding-top: 10px;
      text-align: left;
      flex: 1;

      /deep/ .elbutton {
        color: red !important;

      }
      .el-form--inline .el-form-item {
        margin-bottom: 5px;
      }
    }
  }
</style>
